<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试JSONP解决跨域</title>
    </head>
    <body>
        <h2>该页面是测试JSONP解决跨域</h2>
        <button id="btn">点我获取数据</button>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script type="text/javascript">
            let btn = document.getElementById("btn")
            btn.onclick = function(){
                /**
                 * 关于jsonp解决跨域的说明
                 *      1. 原理: 利用率标签发送GET请求"天然跨域"(不受同源策略的限制)
                 *      2. 套路
                 *          - 创建script节点, 指定src, 利用标签把请求发出去
                 *          - 定义好一个处理数据的数据
                 *          - 后端返回符合js函数调用语法的字符串
                 *      3. 局限性
                 *          1) 只能解决GET请求跨域问题
                 *          2) 必须需要后端人员配合
                 */ 
                let scriptNode = document.createElement("script")
                window.demo = function(data){
                    console.log(data)
                }
                scriptNode.src = "http://localhost:3000/test_get?callback=demo"
                document.body.appendChild(scriptNode)
            }
        </script>
    </body>
</html>